﻿@charset "utf-8";
/* Main Layout */
* { font-family:Arial, Helvetica, sans-serif; font:Arial, Helvetica, sans-serif; font-size: 14px;}
a { text-decoration: none; color: #000; }
a:hover, a:visited { text-decoration: none !important; }
* a img { text-decoration: none; border: 0px; color: #000; }
ul { list-style-type: none; }
label.error { color: red; }
label.suc { color: green; }
body { margin: 0; padding: 0; outline: 0; }
.wrapper { margin: 0 auto;  width: 979px; position: relative; background: #F4F4F4; }
#msg { background: url(../image/layout/ok-msg-bg.png) repeat-x; border: 1px solid #c8c26b; margin-top: 10px; text-align: left; height: 35px; padding-top: 5px; }
#msg .suc { background: url(../image/layout/suc-msg-icon.png) no-repeat; height: 30px; color: #948b10; padding-left: 40px; padding-top: 3px; }
#msg .err { background: url(../image/layout/err-msg-icon.png) no-repeat; height: 30px; color: red; padding-left: 40px; padding-top: 3px; opacity: 0.5; }
/* End of main Layout */

/* Common */
/* Floating banner */
.left-floating-banner { position: absolute; left: -135px; width: 120px; height: 600px; }
.right-floating-banner { position: absolute; right: -130px; width: 120px; height: 600px; }
/* End of floating banner */

/* Top banner */
.top-banner-wrapper { background: #fced1e/*url(../image/layout/top-banner-bg.png) repeat-x*/; width: 978px; height: 57px; }
.logo { background: url(../image/layout/logo.png) no-repeat; width: 181px; height: 45px; float: left; margin-top: 9px; margin-left: 5px; }
.phone-number-wrapper { float: left; width: 595px; margin-top: 5px; text-align: center; }
.phone-number { background: url(../image/layout/phone-icon.png) no-repeat; height: 38px; padding-top: 5px; display: inline-block; font-size: 20px; font-weight: bold; padding-left: 45px; padding-top: 5px; }

.favourite-cart-wrapper, .favourite-cart-wrapper:hover { float: right; width: 200px; margin-top: 12px; margin-right: -6px; cursor: pointer; }
.favourite-wrapper { border: 1px solid #b2a715; background-color: #000000; width: 50px; height: 28px; float: left; position: relative; }
.favourite-list-wrapper { background: #000; max-height: 425px; z-index: 99999; position: absolute; left: -253px; margin-top: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; cursor: default; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; display: none; min-width: 311px; }
.favourite-list-wrapper .favourite-product-wrapper:first-child .favourite-product-sep { top: 0; } 
.favourite-product-wrapper { margin: 5px; border-bottom: 1px solid #464646; padding-bottom: 5px; position: relative; min-height: 73px; }
.favourite-product-wrapper img { width: 56px; height: 73px; cursor: pointer; }
.favourite-product-info-wrapper { float: right; color: #cdcdcd; position: relative; width: 170px; height: 70px; }
.favourite-product-name { font-size: 12px; font-weight: bold; text-transform: uppercase; margin-left: -15px;}
.favourite-product-price { color: #515151; text-decoration: line-through; bottom: 20px; position: absolute; right: 5px; }
.favourite-product-discounted-price { color: #e00024; font-size: 21px; bottom: 0px; position: absolute; right: 5px; }
.favourite-product-delete-wrapper { float: right; width: 45px; } 
.favourite-product-delete-wrapper div { background: url(../image/layout/delete-btn-icon-2.png) no-repeat; width: 17px; height: 16px; cursor: pointer; margin: 0 auto; margin-top: 30px; }
.favourite-product-sep { position: absolute; right: 46px; height: 84px; border-right: 1px solid #464646; top: -5px; }

.favourite-icon { background: url(../image/layout/small-favourite-icon.png) no-repeat; width: 20px; height: 18px; margin: 6px; padding-left: 25px; color: #feed0b; }
.styled-scroll-wrapper { height: 380px; padding:0 10px; } /* for modal */
#myModal .modal-body { overflow: hidden; }

#profile { position: relative; overflow: hidden; }
.profile-wrapper { float: left; }
.profile-wrapper input[type="radio"] { margin-top: -3px; }
.profile-wrapper-sep { background: url(../image/layout/profile-sep-bg.png) repeat-y; width: 6px; height: 100%; position: absolute; left: 486px; }
.change-pass-wrapper { float: left; margin-left: 150px; }
.change-pass-wrapper label.error  { display: block; }
.change-pass-wrapper .control-block { margin-left: 0; }
.change-pass-wrapper span { color: #5d5d5d; font-weight: bold; font-size: 19px; display: block; margin-bottom: 20px;}
.change-pass-wrapper span input[type="checkbox"] { margin-top: -3px; }
.save-profile-btn { background: url(../image/layout/save-profile-btn-bg.png) no-repeat; width: 120px; height: 32px; color: #feed0b; }

.cart-wrapper { border: 1px solid #b2a715; background-color: #000000; width: 140px; height: 28px; float: left; }
.cart-wrapper > div { color: #feed0b; padding: 5px 1px 6px 10px; float: left }
.cart-icon-wrapper { width: 100px; height: 16px; margin-left: -5px; }
.cart-icon { background:url(../image/layout/cart-icon.png) no-repeat; color: #fff; padding-left: 25px; margin-top: 1px; }
/* End of top banner */

/* Navigator */
.navigator-wrapper { background: url(../image/layout/navigator-bg.png) repeat-x; width: 978px; height: 38px; margin-top: -2px; }
.navigator { position: absolute; margin-left: 5px; margin-top: 8px; text-transform: uppercase; }
.navigator li div { background: url(../image/layout/home-icon.png) no-repeat center center; width: 13px; height: 13px; float: left; margin-right: 10px; cursor: pointer; padding-top: 3px; }
.navigator li:first-child:hover div { background: url(../image/layout/home-icon-hover.png) no-repeat center center; width: 13px; height: 13px; float: left; margin-right: 10px; cursor: pointer; padding-top: 3px; }
.navigator li { display: inline-block;  }
.navigator li a, .navigator li span { color: #fff; padding-top: 6px; }
.navigator li span { margin-left: 5px; }
.navigator li.active a, .navigator li a:hover, .navigator li span:hover { color: #fcff00; }

.user-action { float: right; margin-top: -6px; margin-right: 5px; }
.user-action ul { margin-left: -3px; margin-top: 12px; }
.user-action ul li { display: inline-block; }
.user-action ul li span { color: #fff; }
.user-action ul li a { color: #fff; cursor: pointer; }
.authenticated-wrapper { position: relative; margin-top: 10px; }
.authenticated { text-align: right; padding-top: 2px; }
.hello-block { cursor: pointer; display: inline-block; }
.hello-block span:first-child { color: #fff; }
.hello-block span:first-child + span { background: url(../image/layout/profile-arrow.png) no-repeat center right; color: #feed0b; padding-right: 15px; }

.cart-profile-menu-wrapper { display: none;  }
.cart-profile-menu-wrapper span:first-child { color: #fff; }
.cart-profile-menu-wrapper span:first-child + span{ color: #feed0b; }
.cart-profile-menu-wrapper a { display: block; margin-top: 8px; text-align: left; margin-left: 10px; color: #dbdbdb; }
.cart-profile-menu-wrapper a.active span, .cart-profile-menu-wrapper a:hover span { color: #feed0b; }
.cart-profile-menu-wrapper hr { border: 1px solid #848484; width: 100px; margin-top: 10px; margin-bottom: -4px; }
.cart-profile-menu-wrapper.active { background: #000; margin-top: -3px; margin-left: -135px; padding-top: 8px; position: absolute; z-index: 99999; text-align: center; display: inline-block; cursor: pointer; width: 140px; }
/* End of navigator */

/* Menu, newsletter and search */
.newsletter-search-wrapper { background:url(../image/layout/newsletter-search-bg.png) repeat-x; width: 978px; height: 55px; margin-bottom: 5px; position: relative; }
.menu-wrapper { border: 1px solid #d2d2d2; width: 199px; float: left; margin-top: -4px; padding-top: 4px; cursor: pointer; }
.menu-wrapper div { background: url(../image/layout/top-bottom-arrow.png) no-repeat 186px 23px; width: 169px; height: 38px; margin-top: -4px; text-align: center; padding-top: 15px; padding-bottom: 0; font-weight: bold; font-size: 16px; }
.toggleMenu { display: inline-block; background: #ccc; padding: 10px 15px; }
.menu { list-style: none; *zoom: 1; margin-left: 0; margin-top: 8px; position: absolute; width: 199px; z-index: 999; text-align: left; -webkit-box-shadow: 0px 2px 5px 2px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 2px 5px 2px rgba(50, 50, 50, 0.5); box-shadow: 0px 2px 5px 2px rgba(50, 50, 50, 0.5); background: #fff; }
.menu:before, .menu:after { content: " "; display: table; }
.menu:after { clear: both; }
.menu ul { list-style: none; margin-left: 15px; }
.menu a { padding-left: 12px; font-weight: bold; display: block; margin-bottom: 6px; }
.menu a.active, .menu a.parent { text-decoration: none; color: #000000; }
.menu a:hover { background: url(../image/layout/menu-item-hover.png) bottom left no-repeat; height: 24px; display: block; color: #fff; }
.menu li a.parent.active, .menu li a.active { background: url(../image/layout/menu-item-hover.png)no-repeat; height: 24px; display: block; color: #fff; text-decoration: none; }
.menu li { position: relative; }
.menu > li { float: left; background: url(../image/layout/left-right-arrow.png) no-repeat 0px 7px; margin-bottom: 0px; line-height: 24px; margin-left: 5px; }
ul.menu ul li { background: url(../image/layout/left-right-arrow.png) no-repeat 0px 7px; margin-bottom: 0px; line-height: 24px; }
ul.menu ul li li { background: url(../image/layout/left-right-arrow.png) no-repeat 0px 7px; margin-bottom: 0px; line-height: 24px; margin-left: 10px; }
.active { display: inline-block; }
.menu > li { float: none; }
.menu li li .parent + ul { margin-top: 4px; }
.menu li .parent + ul { margin-top: 4px; }
/*.menu.hide { display: none; }
.menu li a { background: url(../image/layout/left-right-arrow.png) bottom left no-repeat; display: block; padding-left: 12px; font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.menu li.active, .menu li:hover { background:url(../image/layout/menu-item-hover.png) bottom left no-repeat; width: 199px; height: 24px; margin-left: -10px; }
.menu li.active a, .menu li:hover a { color: #fff; display: block; padding-left: 12px; font-size: 16px; font-weight: bold; margin-bottom: 4px; }*/

.newsletter-search-wrapper input[type="text"] { background: #fffee3; border: 1px solid 9f9e8e; height: 25px; margin-top: 3px; }
.newsletter-search-wrapper input[type="text"].email-subscription { background-image: url(../image/layout/mail-icon.png); background-repeat: no-repeat; background-position: 5px 5px; padding-left: 35px; float: left; margin-left: 20px; width: 240px; }
.email-subscription-wrapper { position: relative; }
.security-code { position: absolute; margin-left: 220px; top: 38px; background: #fffee3; -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; padding: 5px; z-index: 999; display: none; }

input[type="button"].send-email-btn { background: #000; color: #fff;  width: 70px; float: left; padding-top: 4px; text-align:center; margin-left: 0; padding-bottom: 4px; }
.newsletter-search-wrapper input[type="text"].search { background-image:url(../image/layout/search-icon.png); background-repeat: no-repeat; background-position: right; padding-right: 20px; float: right; width: 240px; }
.search-form div { float: right; }
.search-btn, .search-btn:hover { background: url(../image/layout/search-icon.png) center center no-repeat; margin-top: 3px; height: 35px; }
.formError { z-index: 9999; opacity: 0.9; left: 450px; display: none; cursor: pointer; position: absolute; }
.formError.active { display: block; }
.formError .formErrorContent { z-index: 991; }
.formError .formErrorArrow { z-index: 996; }
.formError .formErrorContent { width: 100%; background: #ee0101; position: relative; color: #fff; width: 150px; font-size: 11px; border: 2px solid #ddd; box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; padding: 4px 10px 4px 10px;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.formError .formErrorArrow { width: 15px; margin: -2px 0 0 13px; position: relative; }
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0px 0 0 12px; top: 2px; }
.formError .formErrorArrow div { border-left: 2px solid #ddd; border-right: 2px solid #ddd; box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }\
.formError .formErrorArrow .line10 { width: 15px; border: none; }
.formError .formErrorArrow .line9 { width: 13px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; }
.top50 { top: 50px }
.top-35 { top: -35px; }
/* End of menu, newsletter and search */

.wrapper-content { background: url(../image/layout/bg.png) repeat; width: 978px; overflow: hidden; }
.no-background { background: none; margin-top: 10px; }
.box-content-wrapper { margin-top: 15px; }

.breadcrumb-wrapper { width: 978px; border-bottom: 1px solid #c1c1c1; margin-top: 0; padding-top: 10px; }
.breadcrumb { height: 16px; padding-top: 4px; background: none; padding-bottom: -5px; margin-bottom: 0px; }
.breadcrumb-home-icon { background: url(../image/layout/bread-crumb-home-icon.png) no-repeat top left; width: 16px; height: 16px; cursor: pointer; float: left; margin-top: -4px; }
.breadcrumb-sep { padding-left: 18px; float: left; cursor: pointer; }
.breadcrumb-sep { background: url(../image/layout/bread-crumb-sep.png) no-repeat 0px 4px; width: 100px; margin-top: -3px; overflow: auto; width: auto; position: relative; margin-left: 5px; margin-right: 10px; }
.alt { margin-top: -3px; color: #F00; cursor: pointer; }
.footer { background: url(../image/layout/footer-bg.png) no-repeat; width: 978px; margin-top: 10px; text-align: center; }
.address-wrapper { margin-top: 15px; padding-top: 15px; }
.footer-logo { background: url(../image/layout/logo.png) no-repeat; width: 181px; height: 65px; float: left; }
.head-quarter { margin-left: 10px; float: left; width: 340px; }

.head-quarter span { display: block; text-align: left; }
.head-quarter span:first-child { font-weight: bold; }
.factory { margin-left: 40px; float: left; width: 404px; }
.factory span { display: block; text-align: left; }
.factory span:first-child { font-weight: bold; }
.social-network-wrapper { text-align: center; height: 40px; position: absolute; right: 30px; bottom: 23px; }

hr { margin: 0 auto; width: 750px; margin-top: 0; }
.slogan { font-size: 25px; color: #646464; font-weight: bold; margin-top: 15px; }
.phone-number-footer  { font-size: 20px; color: #646464; font-weight: bold; margin-top: 5px; }
.copy-right { font-size: 15px; color: #646464; }

.clear { clear: both; }
.vn-currency:after { content: " VNĐ"; }
.w30 { width: 30px !important; }
.w50 { width: 50px !important; }
.w60 { width: 60px !important; }
.w85 { width: 85px !important; }
.w100 { width: 100px !important; }
.w120 { width: 120px !important; }
.w125 { width: 125px !important; }
.w185 { width: 185px !important; }
.w200 { width: 200px !important; }
.w230 { width: 230px !important; }
.w435 { width: 435px !important; }
/* End common */

/********************************************************** Index **********************************************************/

/* New product */
.new-product-wrapper { width: 530px; height: 506px; float: right; position: relative; }
#new-product-slider { width: 530px; height: 506px; }
#new-product-slider img { width: 530px; height: 506px; } 
#new-product-slider a { width: 30px; height: 36px; position: absolute; top: 50%; }
#new-product-slider .new-product-left { background: url(../image/layout/new-product-left-arrow.png) no-repeat; left: 4px; }
#new-product-slider .new-product-right { background: url(../image/layout/new-product-right-arrow.png) no-repeat; right: 4px; }
/* End of new product */

/* Special product */
.upper-banner { width: 241px; height: 496px; float: right; -webkit-box-shadow: 0px 0px 2px 2px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 2px 2px rgba(153,153,153,1);
box-shadow: 0px 0px 2px 2px rgba(153,153,153,1); margin: 5px 3px 0 2px; }
.upper-banner img { width: 241px; height: 496px; }
.special-product-wrapper { background: url(../image/layout/special-product-bg.png); width: 271px; height: 490px; float: right; font-weight: bold; text-transform: uppercase; position: relative; }
.title { background: url(../image/layout/special-product-title-bg.png) no-repeat; width: 273px; height: 42px; text-align: center; font-size: 15px; margin-top: 6px; padding-top: 10px; position: absolute; z-index: 9; }
.spiral-arrow { background: url(../image/layout/spiral-arrow.png) no-repeat; width: 73px; height: 30px; padding-top: 10px; padding-left: 36px; margin-right: -25px; margin-top: 15px; position: absolute; z-index: 99; right: 5px; top: 35px; }
.spiral-arrow sup { font-size: 7px;}
.price { background: url(../image/layout/special-product-price-bg.png); width: 214px; height: 38px; position: absolute; bottom: 50px; margin-left: 29px; }
.price div { text-align: center; padding-top: 10px; font-size: 17px; cursor: pointer; }
.price div:first-child { color: #fff982; float: left; width: 125px; height: 38px; }
.price div:first-child + div { color: #ffffff; float: right; width: 89px; height: 38px; }
.special-product-wrapper .name { background: url(../image/layout/special-product-name-bg.png) no-repeat; width: 264px; height: 50px; position: absolute; bottom: -10px; margin-left: 4px; text-align: center; font-size: 15px; margin-top:auto; margin-bottom: auto; display: table; border-collapse: separate; }
.special-product-wrapper .name div { display: table-cell; vertical-align: middle; padding: 0 15px; }
/* End of special product */

/* Middle banner */
.middle-banner-wrapper { width: 978px; height: 90px; margin-top: 5px; } 
/* End of middle banner */

/* Index product wrapper */
.index-product-wrapper { width: 978px; clear: both; padding-top: 10px; padding-left: 7px; }
.product-wrapper { background: url(../image/layout/product-bg.png); width: 236px; height: 324px; float: left; margin-right: 7px; margin-top: 6px; position: relative; }
.image-source { width: 226px; height: 299px; padding-top: 5px; }
.image-overlay { background: url(../image/layout/product-bg-hover.png); width: 230px; height: 305px; display: none; }
.image-source:hover .image-overlay { display: block; position: absolute; z-index: 99; margin-left: 3px; margin-top: -3px; } 
.image-source:hover + .name { position: absolute; z-index: 999; }
.product-wrapper:hover .shop-now-btn-wrappper, .product-wrapper:hover .faourite-btn { position: absolute; z-index: 9999; }
.image-source img { padding-left: 5px; max-height: 299px; max-width: 224px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.product-wrapper .name { background: url(../image/layout/product-bg-footer.png) no-repeat ; width: 236px; height: 54px; position: absolute; bottom: 0; left: 0; text-align: center; line-height: 50px; margin-top: auto; margin-bottom: auto; z-index: 9; }

.overlay-info-wrapper { display: none; bottom: 20px; position: absolute; cursor: pointer; }
.product-wrapper:hover .overlay-info-wrapper { display: inline; top: 0; padding-top: 5px; padding-left: 5px; height: 20px; }
.overlay-info-wrapper .top { background: url(../image/layout/overlay-top-bg.png) repeat-x; width: 226px; height: 19px; padding-top: 2px; }
.overlay-info-wrapper .top div { background: url(../image/layout/user-icon.png) no-repeat left center; width: 22px; height: 19px; padding-left: 15px; color: #fde103; margin-left: 3px; font-size: 11px; margin-top: -3px; margin-left: 80px; }
.product-wrapper:hover .faourite-btn.active, .product-wrapper:hover .faourite-btn { position: absolute; margin-top: 5px; margin-left: 100px; display: block; }
.faourite-btn { background: url(../image/layout/big-favourite-icon.png); width: 27px; height: 27px; position: absolute; margin-top: 5px; margin-left: 100px; display: none; cursor: pointer; }
.faourite-btn.active, .faourite-btn:hover { background: url(../image/layout/favourite-icon-hover.png); width: 27px; height: 27px;  }
.status-logo-wrapper { position: absolute; top: 3px; left: 3px; z-index: 99; }
.status-logo { position: relative; text-align: center; top: -3px; left: -3px; }
.status-logo img { width: 55px; height: 55px; }
.shop-now-btn-wrappper { background: url(../image/layout/shop-now-btn-bg.png); width: 214px; height: 29px; position: absolute; bottom: 0; margin-left: 10px; margin-bottom: 65px; z-index: 99; }
.shop-now-btn-wrappper:hover { opacity: 0.7; background: none repeat scroll 0 0 rgba(0, 149, 218, 0.8) }
.shop-now-btn-wrappper:hover .product-price, .shop-now-btn-wrappper:hover .shop-now-btn { font-weight: bold; }
.shop-now-btn-wrappper div { float: left; height: 29px; text-align: center; padding-top: 5px; }
.shop-now-btn-wrappper .product-price { color: #feed0b; width: 125px; }
.shop-now-btn-wrappper .shop-now-btn { color: #a5a4a4; width: 89px; cursor: pointer; margin-bottom: 5px; }
.ribbon-wrapper { width: 55px; height: 55px; overflow: hidden; position: absolute; top: -7px; right: -7px; z-index: 99; }
.ribbon { 
	/*font-size: 17px;
	font-weight: bold;
  	color: #333;
	text-align: center;
  	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  	-webkit-transform: rotate(45deg);
  	-moz-transform:    rotate(45deg);
  	-ms-transform:     rotate(45deg);
  	-o-transform:      rotate(45deg);*/
  	position: relative;
  	padding: 7px 0;
  	left: -3px;
  	top: -4px;
}
.ribbon:before, .ribbon:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; }
.ribbon:before { left: 0; }
.ribbon:after { right: 0; }
/* End of index product wrapper */

/* Index paging */
.index-paging-wrapper { margin-top: 10px; margin-bottom: 25px; }
.paging { border: 1px solid #aeaeae; float: right; height: 25px;}
.paging ul { cursor: pointer; margin: 0; padding: 0; }
.paging ul li { display: inline-block; text-align: center;  width: 25px; height: 25px; padding-top: 2px; font-size: 16px;}
.paging ul li:hover, .paging ul li.active { background:url(../image/layout/page-number-hover.png) no-repeat; width: 25px; height: 25px; text-align: center; display: inline-block; }
.pagination-right{ padding-top:15px; }
#example_paging{ cursor: pointer; }
/* End of index paging */


/* Best seller */
.best-seller-wrapper { border: 1px solid #d2d2d2; width: 976px; height: 210px; margin-top: 15px; position: relative; }
.best-seller-wrapper a { position: absolute; top: -13px; } 
.best-seller-wrapper a span { width: 18px; height: 18px; }
a.left { right: 32px; }
.icon-prev { background: url(../image/layout/best-seller-left-arrow.png) no-repeat; }
a.right { right: 10px; }
.icon-next { background: url(../image/layout/best-seller-right-arrow.png) no-repeat; }
.best-seller-title { background: url(../image/layout/best-seller-title-bg.png) no-repeat; width: 276px; height: 31px; margin-top: -25px; margin-left: 5px; font-weight: bold; text-align: center; padding-top: 8px; }
.best-seller-slider-wrapper {  }
.best-seller { background-color: #ffffff; width: 126px; height: 196px; float: left; margin-right: 5px; margin-left: 8px; cursor: pointer; width: 120px; height: 190px; position: relative; }

.best-seller img { max-width: 126px; max-height: 196px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.best-seller div { position: absolute; bottom: 0; display: none; font-size: 15px; }
.best-seller-name { margin-bottom: 38px; margin-left: 10px; color: #222222; width: 100px; }
.best-seller-price { margin-bottom: 20px; margin-left: 10px; color: #777777; width: 100px; }
.best-seller:hover .best-seller-name, .best-seller:hover .best-seller-price { display: block; } 
.best-seller:hover { background: url(../image/layout/best-seller-bg-bg.png); width: 126px; height: 196px; }
.best-seller:hover img { opacity: 0.2; filter: alpha(opacity=20); }
/* End of best seller */

/* Branch, statistics and facebook like */
.pre-footer-wrapper { height: 211px; margin-top: 20px; }
.branch-wrapper { width: 478px; border-top: 2px solid #e4e4e4; float: left; }
.branch-wrapper-title { position: absolute; z-index: 9; background-color: #fafafa; margin-top: -15px; font-weight: bold; font-size: 18px; width: 180px; }
#branches { margin-top: 10px; border: 1px solid #DDDDDD; }

.access-statistics-wrapper { width: 223px; height: 211px; border: 1px solid #d2d2d2; float: left; margin-left: 10px; }
.statistics-title span { display: block; margin-left: 10px; font-weight: bold; }
.statistics-title span:first-child { font-size: 12px; margin-top: 3px; }
.statistics-title span:first-child + span { font-size: 22px; color: #787878; margin-bottom: 5px; }
.statistics-title ul { margin: 0; padding: 3px; margin-top: 4px;  }
.statistics-title ul li { background: url(../image/layout/access-statistics-user-icon.png) no-repeat; display: block; margin-bottom: 10px; font-size: 15px; }
.statistics-title ul li div { display: inline-block; }
.statistics-title ul li div:first-child { width: 100px; margin-left: 15px; }
.statistics-title ul li div:first-child + div { width: 25px; }

.facebook-like-wrapper { width: 260px; height: 211px; float: left; margin-left: 3px; }/* End of branch, statistics and facebook like */

/********************************************************** Product detail **********************************************************/
/* Product box */
.product-box-wrapper { margin: 5px; overflow: hidden; }
.left-box-wrapper { float: left; }
.active-product-wrapper { width: 300px; height: 394px; position: relative; border: 1px solid black; padding: 0; }
.active-product { max-height: 394px; max-width: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.active-product:hover .overlay-info-wrapper { display: block; top: 0; padding-top: 5px; padding-left: 5px; height: 250px; }
.active-product:hover .overlay-info-wrapper .top { background: url(../image/layout/overlay-top-bg.png) repeat-x right center; width: 300px; margin-left: -6px; float: right; margin-top: -4px; }
.active-product:hover .overlay-info-wrapper .top div { background: url(../image/layout/user-icon.png) no-repeat top left; height: 19px; padding-left: 15px; color: #fde103; font-size: 11px; float: right; margin-top: 2px; }
.inactive-product-wrapper { width: 54px; height: 71px; border: 1px solid #bebebe; margin-top: 5px; float: left; margin-right: 4px; position: relative; }
.inactive-product-wrapper.active { border: 1px solid #ccc !important; width: 54px; height: 71px; border: 1px solid #bebebe; margin-top: 5px; float: left; margin-right: 4px; position: relative; }
.inactive-product { max-height: 71px; max-width: 54px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.center-box-wrapper { float: left; padding: 10px; width: 400px; padding-left:20px; position: relative; }
.center-box-wrapper span { display: block; }
.optional { line-height: 30px !important; margin-bottom: 15px; }
.product-name { font-size: 18px; font-weight: bold; text-transform: uppercase; }
.dash:before { content: "–"; padding-right: 5px; font-size: 12px; }
.optional-price-wrapper { margin-top: 20px; }
.optional-price-title { border-bottom: 1px solid #a2a2a2; padding-bottom: 5px; text-transform: uppercase; margin-bottom: 10px; font-size: 14px; }
.optional-price-wrapper span { margin-bottom: 12px; }

.right-box-center { float: right; width: 225px; margin-right: 3px; margin-top: 5px; }
.add-to-cart-box-wrapper { background:url(../image/layout/add-to-cart-btn-box-bg.png); height: 140px; position: relative; }
.old-price { text-decoration: line-through; margin-left: 50px; margin-top: 30px; position: absolute; font-size: 17px; text-align: right; width: 150px; }
.discounted-price { color: #F00; text-align: right; margin-left: 50px; margin-top: 50px; position: absolute; font-size: 22px; width: 150px; }
.add-to-cart-btn-wrapper { background: url(../image/layout/add-to-cart-btn-bg.png); width: 217px; height: 50px; position: absolute; bottom: 0; margin: 4px; cursor: pointer;}
.left-ribbon-wrapper { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; left: -3px; }
.left-ribbon {
	font-size: 17px;
	font-weight: bold;
  	color: #333;
	text-align: center;
  	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  	-webkit-transform: rotate(-45deg);
  	-moz-transform:    rotate(-45deg);
  	-ms-transform:     rotate(-45deg);
  	-o-transform:      rotate(-45deg);
  	position: relative;
  	padding: 7px 0;
  	right: 25px;
  	top: 7px;
  	width: 100px;
  	background-color: #BFDC7A;
  	background-image: -webkit-gradient(linear, left bottom, left top, from(#4f4f4f), to(#4f4f4f)); 
  	background-image: -webkit-linear-gradient(top, #4f4f4f, #4f4f4f); 
  	background-image:    -moz-linear-gradient(top, #4f4f4f, #4f4f4f); 
  	background-image:     -ms-linear-gradient(top, #4f4f4f, #4f4f4f); 
  	background-image:      -o-linear-gradient(top, #4f4f4f, #4f4f4f); 
  	color: #ffffff;
  	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  	-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  	box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.left-ribbon:before, .left-ribbon:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; bottom: -3px; }
.left-ribbon:before { left: 0; }
.left-ribbon:after { right: 0; }
.big-cart-icon { background: url(../image/layout/big-cart-icon.png) no-repeat; height: 25px; padding-left: 70px; font-size: 22px; color: #feed0b; font-weight: bold; margin-left: 15px; margin-top: 12px; padding-top: 3px; }

.extra-info { background: url(../image/layout/extra-info-bg.png) no-repeat; width: 225px; height: 193px; margin-top: 5px; padding-top: 5px; padding-left: 10px; }
.extra-info ul { padding: 0; margin-left: 0; margin-top: 5px; }
.extra-info ul li { background: url(../image/layout/check-icon.png) no-repeat; height: 22px; margin-bottom: 10px; padding-left: 25px; padding-top: 3px; padding-right: 15px;}
/* End of product box */

/* Product description and comment */
#product-description-comment-wrapper .tabs-wrapper { margin: 10px; position: relative; }
#product-description-comment-wrapper .tabs-wrapper .tabs { padding: 0; margin-left: 5px; }
.tabs { margin-left: 14px; }
.tabs li { display: inline; }
.tabs li a { background: #d2d2d2; padding: 10px; float: left; border-top: 1px solid #bebebe; border-left: 1px solid #bebebe; border-right: 1px solid #bebebe; text-decoration: none; color: #282828; font-weight: bold; margin-right: 2px; text-transform: uppercase; }
.tabs li.active a { background: #ffffff; border-bottom: 1px solid #fff; position: relative; z-index: 9; }
.tabs li.active {  }
.tab-content { float: left; clear: both; border: 1px solid #bebebe; background: #ffffff; padding: 10px 20px 20px; margin-bottom: 10px; margin-left: 14px; margin-top: -1px; width: 906px; text-align: justify; }

.comment { width: 890px; background: #fafafa; border: 1px solid #bebebe; height: 100px; margin-top: 5px; }
.send-comment-btn, .send-comment-btn:hover { background: url(../image/layout/send-comment-btn-bg.png) no-repeat; width: 130px; height: 32px; float: right; text-transform: uppercase; text-align: center; color: #f2e310; font-size: 16px; padding-top: 5px; margin-top: 15px; text-decoration: none; margin-left: 5px; }
#comment hr { border: 1px solid #bebebe; clear: both; width: 905px; }
#comment label { font-size: 24px; margin: 10px; }
#online-auction hr { border: 1px solid #bebebe; clear: both; width: 905px; }
#online-auction label { font-size: 24px; margin: 10px; }
.comment-block-wrapper { margin-bottom: 40px; margin-top: 60px; }.comment-block-wrapper .comment-block-wrapper, .comment-block-wrapper .comment { margin-left: 50px; width: 841px; }.comment-block { border: 1px solid #bebebe; }
.comment-block-header { background: url(../image/layout/product-comment-header-bg.png) repeat-x; height: 33px; }
.comment-block-header div {  margin: 8px; }
.comment-block-header div:first-child { float: left; color: #feed0b; }
.comment-block-header div:first-child + div { float: right; color: #bcbcbc;  }
.comment-content { margin: 15px; }
.comment-counter { float: right; color: #e00024; margin-top: 6px; font-weight: bold; }
/* End of product description and comment */

/********************************************************** Cart and profile **********************************************************/
.wrapper-content.no-background {  }
#cart .tab-content { float: left; clear: both; border: 1px solid #bebebe; background: #ffffff; padding: 10px 20px 20px; margin-bottom: 10px; margin-left: -10px; margin-top: -1px; width: 936px; text-align: justify; }
.wrapper-content.no-background li div { margin-top: 40px; position: absolute; border: 1px solid #fff; display: none; }
.wrapper-content.no-background table { border-spacing: 0; border-collapse: collapse; width: 100%;  border-style: hidden; }
.wrapper-content.no-background table thead tr th { background: #2d2d2d; color: #feed0b; text-align: center; border: 1px solid #d2d2d2; padding: 5px; }
.wrapper-content.no-background table tbody tr td { text-align: center; padding: 2px; }
.wrapper-content.no-background table tbody tr td.money { color: #a82626; }
.wrapper-content.no-background table tbody tr td.action a { display: inherit-block; cursor: pointer; }
.wrapper-content.no-background table tbody tr td.action img { width: 20px; height: 18px; }
.wrapper-content.no-background table td { border: 1px solid #d2d2d2; } 
.wrapper-content.no-background table tbody tr:hover td, #cart table tbody tr.odd:hover td, #cart table tbody tr.even:hover td { background: #ffd; }
.wrapper-content.no-background table tbody tr.odd { background-color: #e6e6e6; }
.wrapper-content.no-background table tbody tr.even { background-color: #b6b5b5; }
.product-thumbnail-wrapper { background: url(../image/layout/thumnail-bg.png) no-repeat; width: 40px; height: 48px; width: auto; border-style: none; }
.product-thumbnail-wrapper div { float: left; }
.thumbnail-product img { width: 40px; height: 48px; margin: 0;  }
.product-name { font-size: 14px; margin-top: 15px; margin-left: 5px; }
.total-wrapper { background: #d2d2d2; float: right; width: 253px; height: 30px; margin-top: 2px; }
.total-wrapper div {  font-size: 18px; margin-top: 4px; }
.total-wrapper div:first-child { font-weight: bold; float: left; margin-left: 5px; }
.total-wrapper div:first-child + div { font-weight: bold; float: right; color: #a82626; margin-right: 34px; width: 104px; text-align: center; }
.checkout-wrapper { float: right; margin-top: 15px; }
.checkout-wrapper div { float: right; text-transform: uppercase; cursor: pointer;  }
.checkout-wrapper div:first-child { background: url(../image/layout/checkout-btn-bg.png) no-repeat; width: 170px; height: 32px; color: #feed0b; font-weight: bold; text-align: center; padding-top: 6px; }
.checkout-wrapper div:first-child + div { margin-top: 7px; margin-right: 0; }
.checkout-wrapper div:first-child + div + div { margin-top: 5px; }
.checkout-wrapper div:first-child + div + div a { background: url(../image/layout/back-btn-icon.png) no-repeat; color: #8c8c8c; padding-left: 15px; text-decoration: underline; }

/********************************************************** Login and register **********************************************************/
.login-register-wrapper { margin-top: 10px; -moz-box-shadow: 0 0 4px 4px #dcdcdc; -webkit-box-shadow: 0 0 4px 4px #dcdcdc; box-shadow: 0 0 4px 4px #dcdcdc; background: #FFF; overflow: hidden; position: relative; }
.login-wrapper { width: 316px; padding-right: 5px; display: inline-block; float: left; }
.login-title { background: url(../image/layout/login-title-bg.png); width: 316px; padding: 18px; }
.login-title span { display: block; }
.login-title span:first-child { text-transform: uppercase; color: #feed0b; font-size: 18px; font-weight: bold; }
.login-title span:first-child + span { color: #fffcd5; }
.login-content { margin-top: 25px; }
.control-block { margin-bottom: 5px; margin-left: 10px; }
.control-block .control-block { display: inline-block; }
.control-block .control-block input { display: inline-block; margin-right: 10px; }
.control-block .control-label { text-align: left; margin-right: 15px; width: 70px; }
.control-block input { margin-left: 0; }
.control-block label, .control-block input { display: inline-block; }
.login-btn { background: url(../image/layout/login-btn-bg.png) no-repeat; width: 100px; height: 32px; color: #feed0b; text-transform: uppercase; }

.login-register-sep { background: url(../image/layout/login-register-sep.png) repeat-y; width: 6px; height: 100%; position: absolute; margin-left: 320px; margin-top: 76px; }

.register-wrapper { float: left; width: 657px; float: right; } 
.register-title { background: url(../image/layout/register-title-bg.png) repeat; padding: 18px; }
.register-title span { display: block; }
.register-title span:first-child { text-transform: uppercase; color: #feed0b; font-size: 18px; font-weight: bold; }
.register-title span:first-child + span { color: #fffcd5; }
.register-content { margin-top: 25px; padding-left: 20px; }
.register-content input[type="radio"], .register-content input[type="checkbox"] { margin-top: -4px; }
.register-btn { background:url(../image/layout/register-btn-bg.png); width: 140px; height: 32px; padding-left: 50px; color: #feed0b; text-transform: uppercase; margin-top: 10px; }

.live-support-wrapper {  position: fixed; bottom: -300px; right: 0; text-align: left;}
.live-support-wrapper .chat-icon { background: url(../image/layout/chat-icon.png) no-repeat; width:155px; height:150px;float: left; cursor: pointer; }
.arrow-up-icon { background: url(../image/layout/arrow-up-icon.png) no-repeat; width: 50px; height: 60px; position: fixed; bottom: 15px; cursor: pointer; right: 50px; }
.live-support-wrapper a {  }

/********************************************************** News **********************************************************/
.wrapper-news { padding: 20px 0; border-bottom: 1px solid #c1c1c1; overflow: hidden; }
.wrapper-news-image { overflow: hidden; width: 306px; height: 170px; -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5); margin-left: 2px; float: left; cursor: pointer; }
.wrapper-news-content { float: left; width: 645px; margin-left: 15px; text-align: justify; } 
.news-title { text-transform: uppercase; font-weight: bold; }
.view-detailed { text-decoration: underline; color: #e00024; font-style: italic; float: right; margin-top: 10px; cursor: pointer; }

/********************************************************** News detail **********************************************************/
.wrapper-news-detail { border: 1px solid #c1c1c1; -webkit-box-shadow: 2px 2px 2px 3px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 2px 3px rgba(0,0,0,0.5); box-shadow: 2px 2px 2px 3px rgba(0,0,0,0.5); padding: 15px; }
.wrapper-news-detail-title { border-bottom: 1px solid #c1c1c1; overflow: hidden; padding-bottom: 10px; }
.news-detail-title { float: left; text-transform: uppercase; font-weight: bold; font-size: 18px;}
.news-detail-date { float: right; color: #797979; }
.news-detail-content { margin-top: 10px; text-align: justify; overflow: hidden; }
